<template>
  <div class="text-to-speech-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>语音播放文本示例</span>
      </div>

      <!-- 文本输入区 -->
      <el-form label-width="100px">
        <el-form-item label="播放文本">
          <el-input
            v-model="text"
            type="textarea"
            :rows="4"
            placeholder="请输入要播放的文本内容"
          />
        </el-form-item>

        <el-form-item label="语言">
          <el-select v-model="lang" placeholder="请选择语言">
            <el-option label="中文" value="zh-CN" />
            <el-option label="英文" value="en-US" />
            <el-option label="日文" value="ja-JP" />
            <el-option label="韩文" value="ko-KR" />
          </el-select>
        </el-form-item>

        <el-form-item label="语速">
          <el-slider
            v-model="rate"
            :min="0.5"
            :max="2"
            :step="0.1"
            show-input
          />
          <span class="tip">范围：0.5 - 2（1为正常速度）</span>
        </el-form-item>

        <el-form-item label="音调">
          <el-slider
            v-model="pitch"
            :min="0"
            :max="2"
            :step="0.1"
            show-input
          />
          <span class="tip">范围：0 - 2（1为正常音调）</span>
        </el-form-item>

        <el-form-item label="音量">
          <el-slider
            v-model="volume"
            :min="0"
            :max="1"
            :step="0.1"
            show-input
          />
          <span class="tip">范围：0 - 1（1为最大音量）</span>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-video-play"
            :disabled="!text || isSpeaking"
            @click="handleSpeak"
          >
            播放
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-video-pause"
            :disabled="!isSpeaking || isPaused"
            @click="handlePause"
          >
            暂停
          </el-button>
          <el-button
            type="success"
            icon="el-icon-video-play"
            :disabled="!isPaused"
            @click="handleResume"
          >
            继续
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-switch-button"
            :disabled="!isSpeaking"
            @click="handleStop"
          >
            停止
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 快捷示例 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>快捷示例</span>
      </div>

      <el-button-group>
        <el-button @click="speakExample1">中文示例</el-button>
        <el-button @click="speakExample2">英文示例</el-button>
        <el-button @click="speakExample3">快速播放</el-button>
        <el-button @click="speakExample4">慢速播放</el-button>
        <el-button @click="speakExample5">高音调</el-button>
        <el-button @click="speakExample6">低音调</el-button>
      </el-button-group>
    </el-card>

    <!-- 可用语音列表 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>可用语音列表</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="loadVoices"
        >
          刷新
        </el-button>
      </div>

      <el-table :data="voices" style="width: 100%" max-height="300">
        <el-table-column prop="name" label="名称" width="300" />
        <el-table-column prop="lang" label="语言" width="120" />
        <el-table-column label="本地" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.localService ? 'success' : 'info'" size="mini">
              {{ scope.row.localService ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="默认" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.default ? 'success' : 'info'" size="mini">
              {{ scope.row.default ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="testVoice(scope.row)"
            >
              测试
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 播放状态 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>播放状态</span>
      </div>
      <div>
        <el-tag :type="isSpeaking ? 'success' : 'info'">
          {{ isSpeaking ? '正在播放' : '未播放' }}
        </el-tag>
        <el-tag :type="isPaused ? 'warning' : 'info'" style="margin-left: 10px;">
          {{ isPaused ? '已暂停' : '未暂停' }}
        </el-tag>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  speakText,
  pauseSpeech,
  resumeSpeech,
  stopSpeech,
  getVoices
} from '@/utils/text-to-speech'

export default {
  name: 'TextToSpeechDemo',
  data() {
    return {
      text: '你好，这是一个文本转语音的示例。你可以调整语速、音调和音量来体验不同的效果。',
      lang: 'zh-CN',
      rate: 1,
      pitch: 1,
      volume: 1,
      isSpeaking: false,
      isPaused: false,
      voices: []
    }
  },
  mounted() {
    this.loadVoices()
    // 某些浏览器需要等待语音列表加载
    if (window.speechSynthesis) {
      window.speechSynthesis.onvoiceschanged = () => {
        this.loadVoices()
      }
    }
  },
  beforeDestroy() {
    // 组件销毁时停止播放
    stopSpeech()
  },
  methods: {
    // 播放
    handleSpeak() {
      speakText(this.text, {
        lang: this.lang,
        rate: this.rate,
        pitch: this.pitch,
        volume: this.volume,
        onStart: () => {
          this.isSpeaking = true
          this.isPaused = false
          this.$message.success('开始播放')
        },
        onEnd: () => {
          this.isSpeaking = false
          this.isPaused = false
          this.$message.info('播放完成')
        },
        onError: (error) => {
          this.isSpeaking = false
          this.isPaused = false
          this.$message.error('播放失败：' + error.message)
        }
      })
    },

    // 暂停
    handlePause() {
      if (pauseSpeech()) {
        this.isPaused = true
        this.$message.info('已暂停')
      }
    },

    // 继续
    handleResume() {
      if (resumeSpeech()) {
        this.isPaused = false
        this.$message.info('继续播放')
      }
    },

    // 停止
    handleStop() {
      if (stopSpeech()) {
        this.isSpeaking = false
        this.isPaused = false
        this.$message.info('已停止')
      }
    },

    // 加载可用语音列表
    loadVoices() {
      this.voices = getVoices()
      if (this.voices.length === 0) {
        this.$message.warning('暂未获取到可用语音列表，请稍后再试')
      }
    },

    // 测试语音
    testVoice(voice) {
      const testText = voice.lang.includes('zh')
        ? '这是一个语音测试示例'
        : 'This is a voice test example'

      speakText(testText, {
        voice: voice.name,
        lang: voice.lang,
        onStart: () => {
          this.isSpeaking = true
          this.isPaused = false
        },
        onEnd: () => {
          this.isSpeaking = false
          this.isPaused = false
        }
      })
    },

    // 示例1：中文
    speakExample1() {
      this.text = '欢迎使用文本转语音功能，这是一个中文示例。'
      this.lang = 'zh-CN'
      this.rate = 1
      this.pitch = 1
      this.volume = 1
      this.handleSpeak()
    },

    // 示例2：英文
    speakExample2() {
      this.text = 'Welcome to use text to speech function. This is an English example.'
      this.lang = 'en-US'
      this.rate = 1
      this.pitch = 1
      this.volume = 1
      this.handleSpeak()
    },

    // 示例3：快速播放
    speakExample3() {
      this.text = '这是一个快速播放的示例，语速设置为1.5倍。'
      this.lang = 'zh-CN'
      this.rate = 1.5
      this.pitch = 1
      this.volume = 1
      this.handleSpeak()
    },

    // 示例4：慢速播放
    speakExample4() {
      this.text = '这是一个慢速播放的示例，语速设置为0.7倍。'
      this.lang = 'zh-CN'
      this.rate = 0.7
      this.pitch = 1
      this.volume = 1
      this.handleSpeak()
    },

    // 示例5：高音调
    speakExample5() {
      this.text = '这是一个高音调的示例，音调设置为1.5。'
      this.lang = 'zh-CN'
      this.rate = 1
      this.pitch = 1.5
      this.volume = 1
      this.handleSpeak()
    },

    // 示例6：低音调
    speakExample6() {
      this.text = '这是一个低音调的示例，音调设置为0.5。'
      this.lang = 'zh-CN'
      this.rate = 1
      this.pitch = 0.5
      this.volume = 1
      this.handleSpeak()
    }
  }
}
</script>

<style scoped>
.text-to-speech-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.tip {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

